<nz-layout class="app-layout">
  <nz-header>
    <div class="app-header">
      <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
        <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"></i>
      </span>
      <nz-divider nzType="vertical"></nz-divider>
      <div class="org-info">
        <zepride-org-info [organization]="orgInfo"></zepride-org-info>
      </div>
      <span class="spacer"></span>
      <nz-badge [nzCount]="messageList.length">
        <a nz-button nzType="link" nz-popover [nzPopoverTitle]="" nzPopoverPlacement="bottomRight"
          [nzPopoverContent]="contentTemplate" nzPopoverTrigger="click" [(nzPopoverVisible)]="popoverVisible">
          <i class="iconfont icon-notification-3-line"></i>
        </a>
      </nz-badge>

      {{version}}
      <div class="user-info">
        <zepride-user-info [user]="loginUser" (logOut)="logOut()"></zepride-user-info>
      </div>
    </div>
  </nz-header>
  <nz-layout>
    <nz-sider class="menu-sidebar" nzCollapsible nzWidth="220px" nzBreakpoint="md" [(nzCollapsed)]="isCollapsed"
      [nzTrigger]="null" nzTheme="light">
      <ul nz-menu nzTheme="light" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
        <ng-container *ngFor="let menu of menus">
          <ng-container *ngIf="$any(menu).children">
            <li nz-submenu [nzOpen]="$any(menu).isOpened" [nzTitle]="titleTpl">
              <ul>
                <li class="menu-item" nz-menu-item [nzSelected]="nav.selected" (click)="selectMenu(nav)"
                  *ngFor="let nav of $any(menu).children">
                  <span class="menu-name">{{nav.name}}</span>
                </li>
              </ul>
            </li>
            <ng-template #titleTpl>
              <div class="parent-menu-wrapper">
                <i class="menu-icon iconfont" [ngClass]="'icon-' + menu.icon"></i>
                <span class="menu-name">{{menu.name}}</span>
              </div>
            </ng-template>
          </ng-container>
          <ng-container *ngIf="!$any(menu).children">
            <ng-container *ngIf="$any(menu).pageId || $any(menu).workflowId;else noRoute">
              <li class="menu-item" nz-menu-item [nzSelected]="$any(menu).selected" (click)="selectMenu(menu)">
                <i class="menu-icon iconfont" [ngClass]="'icon-' + menu.icon"></i>
                <span class="menu-name">{{menu.name}}</span>
              </li>
            </ng-container>
            <ng-template #noRoute>
              <li class="menu-item" nz-menu-item>
                <i class="menu-icon iconfont" [ngClass]="'icon-' + menu.icon"></i>
                <span class="menu-name">{{menu.name}}</span>
              </li>
            </ng-template>
          </ng-container>
        </ng-container>
        <li nz-submenu [nzTitle]="orgTitleTpl">
          <ul>
            <li nz-menu-item>
              <a routerLink="detailsOrganization" class="menu-name">机构详情</a>
            </li>
            <li nz-menu-item>
              <a routerLink="employeeList" class="menu-name">人员管理</a>
            </li>
            <li nz-menu-item>
              <a routerLink="permission" class="menu-name">权限管理</a>
            </li>
            <li nz-menu-item>
              <a routerLink="other" class="menu-name">其他信息</a>
            </li>
            <li nz-menu-item>
              <a routerLink="superAuthority" class="menu-name">超级权限</a>
            </li>
            <li nz-menu-item>
              <a routerLink="place" class="menu-name">功能室管理</a>
            </li>
          </ul>
          <ng-template #orgTitleTpl>
            <div class="parent-menu-wrapper">
              <i class="menu-icon iconfont icon-community-line"></i>
              <span class="menu-name">组织机构管理</span>
            </div>
          </ng-template>
        </li>
        <li nz-menu-item class="menu-item" routerLink="document">
          <i class="menu-icon iconfont icon-delete-bin-5-fill"></i>
          <span class="menu-name">文件模板管理</span>
        </li>
      </ul>
    </nz-sider>
    <nz-content>
      <!-- <div class="page-header" *ngIf="pageHeaderOptions">
                <nz-page-header class="site-page-header" nzBackIcon [nzGhost]="false">
                    <nz-page-header-title>{{pageHeaderOptions.title}}</nz-page-header-title>
                    <nz-page-header-subtitle>{{pageHeaderOptions.subTitle}}</nz-page-header-subtitle>
                    <nz-page-header-extra style="display: flex;">

                        <ng-container *ngFor="let item of pageHeaderOptions.buttons">

                            <button *ngIf="item.buttonType == 'button' || !item.buttonType" nz-button
                                (click)="item.onClick()" [nzType]="item.ngType">
                                <i nz-icon *ngIf="item.icon" [nzType]="item.icon"></i>
                                {{item.text}}
                            </button>

                            <ng-container *ngIf="item.buttonType == 'groupButton'">
                                <button nz-button nz-dropdown [nzDropdownMenu]="menu" [nzType]="item.ngType"
                                    (click)="buttonGroupClick(item)">
                                    {{item.text}}
                                    <i nz-icon nzType="down"></i>
                                </button>
                                <nz-dropdown-menu #menu="nzDropdownMenu">
                                    <ul nz-menu>
                                        <li nz-menu-item *ngFor="let lbtn of item.children">
                                            <a (click)="lbtn.onClick()"
                                                *ngIf="lbtn.buttonType == 'button' || !lbtn.buttonType">
                                                <i nz-icon *ngIf="lbtn.icon" [nzType]="lbtn.icon"></i>
                                                {{lbtn.text}}</a>
                                        </li>
                                    </ul>
                                </nz-dropdown-menu>
                            </ng-container>

                        </ng-container>

                    </nz-page-header-extra>
                </nz-page-header>
            </div> -->

      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>


<ng-template #contentTemplate>
  <div class="message-panel">
    <div class="message-list">

      <ng-container *ngFor="let item of messageList;let last = last">
        <div class="message-item" (click)="messageClick(item)">
          <div class="message-icon">
            <i class="iconfont icon-message-3-fill"></i>
          </div>

          <div class="msg-body">
            <div class="main-title" [innerHTML]="item.body"></div>
            <div class="sub-title">{{item.createTime | date:'yyyy-MM-dd HH:mm'}}</div>
          </div>
        </div>
        <div class="divider" *ngIf="!last"></div>
      </ng-container>

    </div>
  </div>
</ng-template>